<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园二手市场 - 登录</title>
    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #66BB6A;
            --light-gray: #F5F5F5;
            --text-color: #212121;
            --sub-text: #757575;
            --input-border: #E0E0E0;
            --focus-shadow: rgba(76, 175, 80, 0.2);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--light-gray);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .login-container {
            background-color: white;
            padding: 2.5rem 2rem;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 360px;
        }

        h2 {
            text-align: center;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--text-color);
        }

        .form-group {
            margin-bottom: 1.2rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-color);
        }

        .form-group input {
            width: 100%;
            padding: 0.8rem 1rem;
            border: 2px solid var(--input-border);
            border-radius: 12px;
            font-size: 0.95rem;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        .form-group input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px var(--focus-shadow);
        }

        .form-group input::placeholder {
            color: #BDBDBD;
        }

        .btn {
            width: 100%;
            padding: 1rem;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            color: white;
            background-color: var(--primary-color);
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
            cursor: pointer;
        }

        .btn:hover {
            background-color: var(--secondary-color);
        }

        .btn:active {
            transform: scale(0.98);
        }

        .toggle-btn {
            color: var(--primary-color);
            font-size: 0.9rem;
            margin-top: 1rem;
            display: flex;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
            background: none;
            border: none;
        }

        .auth-buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 1.5rem;
            gap: 0.8rem;
        }

        @media (min-width: 600px) {
            .auth-buttons {
                flex-direction: row;
                justify-content: space-between;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>校园二手市场</h2>
        <form id="login-form">
            <div class="form-group">
                <label>登录邮箱</label>
                <input type="email" id="login-email" required placeholder="请输入注册邮箱">
            </div>
            <div class="form-group">
                <label>登录密码</label>
                <input type="password" id="login-password" required placeholder="请输入登录密码">
            </div>
            <button type="submit" class="btn">立即登录</button>
        </form>

        <div class="auth-buttons">
            <button class="toggle-btn" id="toggle-register" onclick="window.location.href='register.html'">新用户注册</button>
            <button class="toggle-btn" id="reset-password-btn" onclick="window.location.href='reset_password.html'">忘记密码？</button>
        </div>
    </div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const users = JSON.parse(localStorage.getItem('users')) || [];
        const loginForm = document.getElementById('login-form');

        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const email = document.getElementById('login-email').value;
            const password = document.getElementById('login-password').value;
            const user = users.find(u => u.email === email && u.password === password);
            if (user) {
                localStorage.setItem('currentUser', JSON.stringify(user)); 
                alert('登录成功');
                window.location.href = 'index.html';
            } else {
                alert('邮箱或密码错误，请重试');
            }
        });
    });
</script>
</body>
</html>